<template>
    <div style="background-color: #EDEDED;" v-if="detailList.optionalDo">
        <div>
            <div style="background: rgba(0,0,0,.2);border-radius: 26px;width:40px;height:40px;margin-left:10px;position:fixed;z-index: 999;top:5px;" @click="returnBcak">
                <img style='margin-top: 11px;margin-left: 13px;' src="../../assets/img/common-icon-ArrowLeftWhite.svg" alt="">
            </div>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="onChange" v-if="detailList.optionalDo">
                <van-swipe-item v-for="(val,index) in detailList.optionalDo.smallImages.split(',')" :key="index">
                    <img style="height:375px;width:100%;" :src="val" alt="">
                </van-swipe-item>
                <template #indicator>
                    <div class="custom-indicator">
                      {{ current + 1 }}/4
                    </div>
                </template>
            </van-swipe>
        </div>
        <div style="height:30px;background-color: #FFF8D4;padding:6px 10px;font-size: 14px;">
            <img style="width:16px;" src="../../assets/img/product-icon-redPackte.svg" alt="">
            <span style="color:#FF2E67;">奖{{((detailList.optionalDo.zkFinalPrice-detailList.optionalDo.couponAmount)*(detailList.optionalDo.commissionRate)*ownRate/10000).toFixed(2)}}元</span>
            <span>最高可获得{{((detailList.optionalDo.zkFinalPrice-detailList.optionalDo.couponAmount)*(detailList.optionalDo.commissionRate)*0.9/10000).toFixed(2)}}元</span>
            <button class="btn1" @click="jumpPlayGame">升级</button>
        </div>
        <div style="background-color: #fff;height: 210px;padding-top: 10px;">
            <div style="padding:6px 10px;font-size: 14px;display: flex;justify-content: space-between;">
                <div style="width:78%;">
                    <span style="color:#fff;background: #FF2E67;padding:2px;font-size: 10px;border-radius: 4px;">淘宝</span>
                    <span style="font-weight: bold;">{{detailList.optionalDo.title}}</span>
                </div>
                <div class="tagBtn">
                    返佣规则
                    <img style="position: absolute;right: 0;" src="../../assets/img/common-icon-moreWhite.svg" alt="">
                </div>
            </div>
            <div style="padding:10px;">
                <span style="font-size: 18px;color:#FF2E67;">￥{{(detailList.optionalDo.zkFinalPrice-detailList.optionalDo.couponAmount).toFixed(1)}}</span>
                <span style="border:1px solid #FF2E67;border-radius: 3px;font-size: 10px;padding:2px 5px;color:#FF2E67;margin-left: 3px;">券后</span>
                <span style="text-decoration: line-through;color:#bbb;margin-left: 3px;">￥{{detailList.optionalDo.zkFinalPrice}}</span>
                <span style="float: right;color:#888;margin-top: 3px;">月售 {{detailList.optionalDo.tkTotalSales}}</span>
            </div>
            <div style="padding:10px;position: relative;height: 69px;line-height: 69px;">
                <img style="width: 100%;" src="../../assets/img/product-img-coupon.svg" alt="">
                <div style="position: relative;top: -70px;padding: 0 20px;display: flex;justify-content: space-between;color: #fff;">
                    <div>
                        <div style="height:34px;font-size: 18px;line-height: 50px;">{{detailList.optionalDo.couponAmount}}元优惠券</div>
                        <div style="height:34px;line-height: 34px;font-size: 12px;">有效期{{detailList.optionalDo.couponStartTime}}～{{detailList.optionalDo.couponEndTime}}</div>
                    </div>
                    <div style="width:1px;height:48px;border: 1px dashed #fff;margin-top: 10px;"></div>
                    <div style="font-size: 18px;font-weight: bold;" @click="jumpLian(detailList.optionalDo.couponAmount)">立即领取</div>
                </div>
            </div>
            <!-- <div style="padding:10px;margin-top:15px;">
                <span style="color:#888;">服务</span>
                <span style="margin-left: 25px;">7天退货 运费险</span>
                <img style="float: right;" src="../assets/img/common-icon-moreGray.svg" alt="">
            </div> -->
        </div>
        <div style="background-color: #EDEDED;padding:8px 0;">
            <!-- <div style="background-color: #fff;padding:13px 10px;">
                <div style="font-size: 14px;display: flex;justify-content: space-between;margin-bottom:15px;">
                    <div>商品评价(12728)</div>
                    <div style="color: #FF2E67;">
                        <span style="margin-right: 5px;">查看全部</span>
                        <img style="margin-top: 6px;" src="../assets/img/common-icon-arrow.svg" alt="">
                    </div>
                </div>
                <div>
                    <img style="border-radius: 28px;width:24px;height:24px;" src="../assets/img/bg_1.png" alt="">
                    <span style="font-size: 12px;color: #888;margin-left:7px;">淘宝192****7</span>
                </div>
                <div style="margin:8px 0;color:#888;">
                    这已经不知道第几次购买了，质量还是一如既往的好，值得推荐哦，欢迎大家来选购！
                </div>
            </div>
            <div style="background-color: #fff;padding:15px 10px;margin-top:8px;">
                <div style="font-size: 14px;display: flex;justify-content: space-between;margin-bottom:15px;line-height: 50px;">
                    <div>
                        <img style="width:50px;height:50px;border-radius: 8px;" src="../assets/img/bg_1.png" alt="">
                        <span style="margin-left:10px;font-weight: bold;">老干妈食品专营店铺</span>
                    </div>
                    <div class="btn2">进店逛逛</div>
                </div>
                <div style="display: flex;justify-content: space-between;font-size: 12px;color:#888;">
                    <div>
                        <span>宝贝描述</span>
                        <span style="color: #FF2E67;">4.8</span>
                        <span style="background-color: #FF2E67;border-radius: 26px;color:#fff;padding:2px;">高</span>
                    </div>
                    <div>
                        <span>卖家服务</span>
                        <span style="color: #FF2E67;">4.8</span>
                        <span style="background-color: #FF2E67;border-radius: 26px;color:#fff;padding:2px;">高</span>
                    </div>
                    <div>
                        <span>物流服务</span>
                        <span style="color: #FF2E67;">4.8</span>
                        <span style="background-color: #FF2E67;border-radius: 26px;color:#fff;padding:2px;">高</span>
                    </div>
                </div>
            </div> -->
            <div style="width:100%;padding: 15px 10px;margin-top: 15px;">
                {{detailList.optionalDo.jddPrice}}
            </div>
            <div style="width:100%;display: flex;justify-content: center;margin: 15px 0;">
                <span style="border-top:1px solid #888;height:1px;width:50px;display: inline-block;position: relative;top:9px;margin-right:5px;"></span>
                <span>商品详情</span>
                <span style="border-top:1px solid #888;height:1px;width:50px;display: inline-block;position: relative;top:9px;margin-left:5px;"></span>
            </div>
            <ul style="padding-bottom:50px;">
            <li v-for="(val,index) in detailList.optionalDo.smallImages.split(',')" :key="index">
                    <img style="width:100%;height:375px;" :src="val" alt="">
                </li>
            </ul>
        </div>
        <div style="height:50px;padding:5px 10px;position: fixed;bottom: 0;background-color: #fff;width:100%;display: flex;justify-content: space-between;">
            <div >
                <img v-if="showColl" style="margin-top: 10px;width: 22px;" src="../../assets/img/product-icon-collect.svg" @click="collect">
                <img v-else style="margin-top: 10px;width: 22px;" src="../../assets/img/product-icon-collecton.svg" @click="collect">
                <span style="color:#888;line-height: 41px;">收藏</span>
            </div>
            <div >
                <span class="btn3" @click="shareCli">分享最高奖{{((detailList.optionalDo.zkFinalPrice-detailList.optionalDo.couponAmount)*(detailList.optionalDo.commissionRate)*ownRate/10000).toFixed(2)}}</span>
                <span class="btn4" id="taobao" @click="buyCli(detailList.optionalDo.couponShareUrl)">购买省{{Number(((detailList.optionalDo.zkFinalPrice-detailList.optionalDo.couponAmount)*(detailList.optionalDo.commissionRate)*ownRate/10000).toFixed(2))+Number(detailList.optionalDo.couponAmount)}}</span>
            </div>
        </div>
        <div v-if="creatShareShow" style="position: fixed;top:0;z-index: 1000;width: 100%;">
            <creatShare :numId="numId" @returnPage="returnCurrentPage"></creatShare>
        </div>
    </div>
</template>

<script>
    import { Swipe, SwipeItem,Toast } from 'vant';
    import creatShare from '../creatShare.vue';
    export default {
        name: 'detailsPage',
        data () {
            return {
                current: 0,
                detailList:[],
                userId:"",
                showColl:true,
                ownRate:0.6,
                numId:'',
                creatShareShow:false
            }
        },
        props:['tranmitId','typeShop'],
        components: {
            [Swipe.name]:Swipe,
            [SwipeItem.name]:SwipeItem,
            creatShare
        },
        mounted() {
            window.noBack = this.returnBcak.bind(this);
            this.$addStorageEvent('returnVal',false);
            // var id = this.$route.params.id;
            var url;
            this.userId = localStorage.getItem('user_id');
            if(this.typeShop == 'taobao'){
               url = "/netmall/app/taobao/api/app/detail/skipProductDetail?numIid="+this.tranmitId;
            }
            // if(this.typeShop == 'pinduoduo'){
            //    url = "/netmall/app/pdd/api/detail/getProductDetail" + "?goodsId="+this.tranmitId;
            // }
            // if(this.typeShop == 'jingdong'){
            //    url = "/netmall/app/taobao/api/app/detail/skipProductDetail";
            // }
            this.$http.get(this.utils.config + url).then((data) => {
                if (data.data.success) {
                    this.detailList = data.data.result;
                }
            })
            if(this.userId){
                this.$http.post(this.utils.config+"/netmall/app/person/api/getPersonCenterData?user_id="+this.userId).then((data) => {
                    this.ownRate = data.data.result.tbMnUser.ownRate/100;
                })
            }
        },
        beforeDestroy() {
            window.noBack = false;
        },
        methods: {
            returnCurrentPage(data){
                this.creatShareShow = data;
            },
            jumpPlayGame(){
                if(this.userId){                    
                    this.$router.push('/usergrade');
                }else{
                    this.$router.push('/login');
                }
            },
            collect(){
                if(this.userId){                    
                    this.$http.post(this.utils.config + "/netmall/app/person/api/productCollect?userId="+this.userId+"&productId="+this.tranmitId).then((data) => {
                        if (data.data.success) {
                            Toast(data.data.message);
                            this.showColl = !this.showColl;
                        }
                    })
                }else{
                    this.$router.push('/login')
                }
            },
            shareCli(){
                if(this.userId){
                    // this.$router.push({
                    //     path: `/creatShare/${this.tranmitId}`
                    // })
                    this.numId = this.tranmitId;
                    this.creatShareShow =true;
                }else{
                    this.$router.push('/login')
                }
            },
            buyCli(url){
                if(this.userId){         
                    if(this.detailList.optionalDo.couponAmount == 0){
                        this.$http.get(this.utils.config + "/netmall/app/taobao/api/deleteTbMnMaterialOptional?num_iid="+this.tranmitId).then((data) => {
                            Toast('该商品已下架')
                            this.$emit('getShow',false)
                        })
                    }else{
                        // this.$http.get(this.utils.config + "/netmall/app/taobao/api/app/detail/openskipProductDetail?user_id="+this.userId+"&numIid="+this.tranmitId).then((data) => {
                        //     if (data.data.success) {
                        //         window.open("taobao:"+data.data.result.couponShareUrl);
                        //     }
                        // })
                        this.$http.get(this.utils.config + "/netmall/app/taobao/api/getNewLinkAddress?user_id="+this.userId+"&num_iid="+this.tranmitId).then((data) => {
                            if (data.data.success) {
                                plus.runtime.openURL(JSON.parse(data.data.message).coupon_click_url, function(ress) {},
                                    'com.taobao.taobao',     //-- taobao:
                                    // 'com.xunmeng.pinduoduo',     --pinduoduo://
                                    // 'com.jingdong.app.mall',
                                );
                            }
                        })
                    }           
                }else{
                    this.$router.push('/login')
                }
            },
             //定义跳转淘宝事件
            testApp(url) { 
                if(plus.os.name == "Android") {
                    plus.runtime.launchApplication({
                        // pname: "com.taobao.taobao",  // 这个有问题吗？
                        // extra: {
                        //     url: $(paramUrl).attr("url")// 这个有问题吗？
                        // }
                        action: "taobao:"+url
                    }, function(e) {
                        window.location.href = "http://android.taobao.com/";
                    });
                } else if(plus.os.name == "iOS") {
                    plus.runtime.launchApplication({
                        action: "taobao:"+url
                    }, function(e) {
                        window.location.href = "http://android.taobao.com/";
                    });
                }
            },
            onChange(index) {
                this.current = index;
            },
            returnBcak(){
                // this.$router.go(-1);
                window.noBack = false;
                this.$emit('getShow',false)
            },
            jumpLian(num){
                if(this.userId){
                    if(num == 0){                        
                        this.$http.get(this.utils.config + "/netmall/app/taobao/api/deleteTbMnMaterialOptional?num_iid="+this.tranmitId).then((data) => {
                            Toast('该商品已下架')
                            this.$emit('getShow',false)
                        })
                    }else{
                        this.$http.get(this.utils.config + "/netmall/app/taobao/api/getNewLinkAddress?user_id="+this.userId+"&num_iid="+this.tranmitId).then((data) => {
                            if (data.data.success) {
                                let res = {
                                    category: 'jump',
                                    des: 'getCoupon',
                                    url: JSON.parse(data.data.message).coupon_click_url
                                };
                                plus.runtime.openURL(JSON.parse(data.data.message).coupon_click_url, function(ress) {},
                                    'com.taobao.taobao',     //-- taobao:
                                    // 'com.xunmeng.pinduoduo',     --pinduoduo://
                                    // 'com.jingdong.app.mall',
                                );
                                // window.open("taobao:"+data.data.result.couponShareUrl);
                            }
                        })
                    }
                }else{
                    this.$router.push('/login')
                }
            }
        },
    }
</script>
<style scoped>
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }
    .custom-indicator {
        color:#fff;
        border-radius: 26px;
        width: 30px;
        height: 30px;
        line-height: 26px;
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 6px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.1);
    }
    .btn1{
        background-color: rgba(0,0,0,0);
        color:#FF2E67;
        border:1px solid #FF2E6780;
        border-radius: 5px;
        float: right;
        margin-top:-3px;
    }
    .tagBtn{
        width:22%;
        height:28px;
        background: linear-gradient(to right,#FFCBABFF,#DF9780FF);
        margin-right: -10px;
        border-radius: 36px 0 0 36px;
        font-size: 12px;
        color: #fff;
        padding:5px;
        padding-left:12px;
    }
    .btn2{
        color:#FF2E67;
        border:1px solid #FF2E6780;
        border-radius: 12px;
        height: 25px;
        line-height: 21px;
        padding:2px 10px;
        margin-top: 13px;
    }
    .btn3{
        color:#fff;
        background-color: #DF9881;
        border-radius: 30px 0 0 30px;
        height: 40px;
        line-height: 40px;
        padding:0 15px;
        border:none;
        width:140px;
        display: inline-block;
        word-wrap:break-word;
        margin-right: -4px;
        /* margin-top: 13px; */
    }
    .btn4{
        color:#fff;
        background-color: #FF2E67;
        border-radius: 0 30px 30px 0;
        height: 40px;
        line-height: 40px;
        padding:0 15px;
        border:none;
        width:140px;
        display: inline-block;
        word-wrap:break-word;
        /* margin-top: 13px; */
    }
</style>
